<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>model_2 foundation</title>
        <link type="text/css" rel="stylesheet" href="css/foundation.css"/>
    </head>
    <body>
<div class="row">
  <div class="small-2 large-4 columns">
      <ul class="large-block-grid-4">
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
  </ul> 
      ...</div>
  <div class="small-4 large-4 columns" style="background-color:gray">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
        <!-- ==================================== -->
<hr/>
<div class="row">
  <div class="large-3 columns">...</div>
  <div class="large-6 columns" style="background-color:gray">...</div>
  <div class="large-3 columns">...</div>
</div>
-------------
<div class="row">
  <div class="small-6 large-2 columns">...</div>
  <div class="small-6 large-8 columns" style="background-color:gray">...</div>
  <div class="small-12 large-2 columns">...</div>
</div>
        ----------
<div class="row">
  <div class="small-3 columns" style="background-color:gray">...</div>
  <div class="small-9 columns">...</div>
</div>
        ----------------
<div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-8 columns" style="background-color:gray">...</div>
</div>
<div class="row">
  <div class="small-6 large-5 columns" style="background-color:gray">...</div>
  <div class="small-6 large-7 columns">...</div>
</div>
<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns" style="background-color:gray">...</div>
</div>
        <br/>
        <br/>
<!-- Using only the small-block-grid -->
<div class="row">
<ul class="small-block-grid-2">
  <li><img src="a0.png"></li>
  <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
</ul>
</div>
<!-- Using only the large-block-grid -->
        <div class="row">
<ul class="large-block-grid-4">
   <li><img src="a0.png"></li>
  <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
</ul>
</div>
<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
   <li><img src="a0.png"></li>
  <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
      <li><img src="a0.png"></li>
</ul>
    </body>
</html>